<!--Sub-menu-->
<?php require __DIR__ . '/../_submenu.php'; ?>
<?php
//Include css
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . '/css/stock/chart.css');
?>
<h1>Stock Chart</h1>

<div class="body" style="margin:0px">
    <table cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td align="right" colspan="2" style="background:#000088">
                <div style="padding-right:3px; padding-bottom:2px; font-family:arial; font-size:10pt; font-weight:bold; font-style:italic">
                    <a style="color:#ffff00; text-decoration:none">
                        Finance Chart for FIP
                    </a>
                </div>
            </td>
        </tr>
        <tr valign="top">
            <td style="width:150px; background:#bbddff">
                <form id="Form1" >
                    <div class="inputtitle">
                        <b>Ticker</b><br />
                        <?php
                        $model = new Stock;
                        $tickers = $model->getAllCompany();
                        echo CHtml::dropDownList('TickerSymbol', array(), $tickers, array('style' => 'width:140px'));
                        ?>
                    </div>
                    <div class="inputtitle">
                        <b>Compare With</b><br />
                        <?php
                        $tickers = $model->getAllCompany('None');
                        echo CHtml::dropDownList('CompareWith', array(), $tickers, array('style' => 'width:140px'));
                        ?>
                    </div>
                    <div class="inputtitle">
                        <b>Time Period</b><br />
                        <select id="TimeRange" name="TimeRange" class="input" style="width:140px;">
                            <option value="7">7 days</option>
                            <option value="15">15 days</option>
                            <option value="30">1 month</option>
                            <option value="60">2 months</option>
                            <option value="90" selected>3 months</option>
                            <option value="180">6 months</option>
                            <option value="365">1 year</option>
                            <option value="0">All time</option>
                        </select>
                    </div>
                    <div class="inputtitle">
                        <b>Chart Size</b><br />
                        <select id="ChartSize" name="ChartSize" class="input" style="width:140px;">
                            <option value="S">Small</option>
                            <option value="M">Medium</option>
                            <option value="L" >Large</option>
                            <option value="H" selected>Huge</option>
                        </select><br />
                    </div>
                    <div class="inputtitle">
                        <input type="checkbox" id="Volume" name="Volume" checked><label for="Volume">Show Volume Bars</label><br />
                        <input type="checkbox" id="ParabolicSAR" name="ParabolicSAR"><label for="ParabolicSAR">Parabolic SAR</label><br />
                        <input type="checkbox" id="LogScale" name="LogScale"><label for="LogScale">Log Scale</label><br />
                        <input type="checkbox" id="PercentageScale" name="PercentageScale"><label for="PercentageScale">Percentage Scale</label><br />
                    </div>
                    <div class="inputtitle">
                        <b>Chart Type</b><br />
                        <select id="ChartType" name="ChartType" class="input" style="width:140px;">
                            <option value="None">None</option>
                            <option value="CandleStick" selected>CandleStick</option>
                            <option value="Close">Closing Price</option>
                            <option value="Median">Median Price</option>
                            <option value="OHLC">OHLC</option>
                            <option value="TP">Typical Price</option>
                            <option value="WC">Weighted Close</option>
                        </select>
                    </div>
                    <div class="inputtitle">
                        <b>Price Band</b><br />
                        <select id="Band" name="Band" class="input" style="width:140px;">
                            <option value="None">None</option>
                            <option value="BB" selected>Bollinger Band</option>
                            <option value="DC">Donchain Channel</option>
                            <option value="Envelop">Envelop (SMA 20 +/- 10%)</option>
                        </select>
                    </div>
                    <div class="inputtitle">
                        <b>Moving Averages</b><br />
                        <nobr><select id="avgType1" name="avgType1" class="input" style="width:105px;">
                                <option value="None">None</option>
                                <option value="SMA" selected>Simple</option>
                                <option value="EMA">Exponential</option>
                                <option value="TMA">Triangular</option>
                                <option value="WMA">Weighted</option>
                            </select>
                            <input id="movAvg1" name="movAvg1" class="input" style="width:30px;" value="10"></nobr><br />
                        <nobr><select id="avgType2" name="avgType2" class="input" style="width:105px;">
                                <option value="None">None</option>
                                <option value="SMA" selected>Simple</option>
                                <option value="EMA">Exponential</option>
                                <option value="TMA">Triangular</option>
                                <option value="WMA">Weighted</option>
                            </select>
                            <input id="movAvg2" name="movAvg2" class="input" style="width:30px;" value="25"></nobr><br />
                    </div>
                    <div class="inputtitle">
                        <b>Technical Indicators</b><br />
                        <select id="Indicator1" name="Indicator1" class="input" style="width:140px;">
                            <option value="None">None</option>
                            <option value="AccDist">Accumulation/Distribution</option>
                            <option value="AroonOsc">Aroon Oscillator</option>
                            <option value="Aroon">Aroon Up/Down</option>
                            <option value="ADX">Avg Directional Index</option>
                            <option value="ATR">Avg True Range</option>
                            <option value="BBW">Bollinger Band Width</option>
                            <option value="CMF">Chaikin Money Flow</option>
                            <option value="COscillator">Chaikin Oscillator</option>
                            <option value="CVolatility">Chaikin Volatility</option>
                            <option value="CLV">Close Location Value</option>
                            <option value="CCI">Commodity Channel Index</option>
                            <option value="DPO">Detrended Price Osc</option>
                            <option value="DCW">Donchian Channel Width</option>
                            <option value="EMV">Ease of Movement</option>
                            <option value="FStoch">Fast Stochastic</option>
                            <option value="MACD">MACD</option>
                            <option value="MDX">Mass Index</option>
                            <option value="Momentum">Momentum</option>
                            <option value="MFI">Money Flow Index</option>
                            <option value="NVI">Neg Volume Index</option>
                            <option value="OBV">On Balance Volume</option>
                            <option value="Performance">Performance</option>
                            <option value="PPO">% Price Oscillator</option>
                            <option value="PVO">% Volume Oscillator</option>
                            <option value="PVI">Pos Volume Index</option>
                            <option value="PVT">Price Volume Trend</option>
                            <option value="ROC">Rate of Change</option>
                            <option value="RSI" selected>RSI</option>
                            <option value="SStoch">Slow Stochastic</option>
                            <option value="StochRSI">StochRSI</option>
                            <option value="TRIX">TRIX</option>
                            <option value="UO">Ultimate Oscillator</option>
                            <option value="Vol">Volume</option>
                            <option value="WilliamR">William's %R</option>
                        </select><br />
                        <select id="Indicator2" name="Indicator2" class="input" style="width:140px;">
                            <option value="None">None</option>
                            <option value="AccDist">Accumulation/Distribution</option>
                            <option value="AroonOsc">Aroon Oscillator</option>
                            <option value="Aroon">Aroon Up/Down</option>
                            <option value="ADX">Avg Directional Index</option>
                            <option value="ATR">Avg True Range</option>
                            <option value="BBW">Bollinger Band Width</option>
                            <option value="CMF">Chaikin Money Flow</option>
                            <option value="COscillator">Chaikin Oscillator</option>
                            <option value="CVolatility">Chaikin Volatility</option>
                            <option value="CLV">Close Location Value</option>
                            <option value="CCI">Commodity Channel Index</option>
                            <option value="DPO">Detrended Price Osc</option>
                            <option value="DCW">Donchian Channel Width</option>
                            <option value="EMV">Ease of Movement</option>
                            <option value="FStoch">Fast Stochastic</option>
                            <option value="MACD" selected>MACD</option>
                            <option value="MDX">Mass Index</option>
                            <option value="Momentum">Momentum</option>
                            <option value="MFI">Money Flow Index</option>
                            <option value="NVI">Neg Volume Index</option>
                            <option value="OBV">On Balance Volume</option>
                            <option value="Performance">Performance</option>
                            <option value="PPO">% Price Oscillator</option>
                            <option value="PVO">% Volume Oscillator</option>
                            <option value="PVI">Pos Volume Index</option>
                            <option value="PVT">Price Volume Trend</option>
                            <option value="ROC">Rate of Change</option>
                            <option value="RSI">RSI</option>
                            <option value="SStoch">Slow Stochastic</option>
                            <option value="StochRSI">StochRSI</option>
                            <option value="TRIX">TRIX</option>
                            <option value="UO">Ultimate Oscillator</option>
                            <option value="Vol">Volume</option>
                            <option value="WilliamR">William's %R</option>
                        </select><br />
                        <select id="Indicator3" name="Indicator3" class="input" style="width:140px;">
                            <option value="None" selected>None</option>
                            <option value="AccDist">Accumulation/Distribution</option>
                            <option value="AroonOsc">Aroon Oscillator</option>
                            <option value="Aroon">Aroon Up/Down</option>
                            <option value="ADX">Avg Directional Index</option>
                            <option value="ATR">Avg True Range</option>
                            <option value="BBW">Bollinger Band Width</option>
                            <option value="CMF">Chaikin Money Flow</option>
                            <option value="COscillator">Chaikin Oscillator</option>
                            <option value="CVolatility">Chaikin Volatility</option>
                            <option value="CLV">Close Location Value</option>
                            <option value="CCI">Commodity Channel Index</option>
                            <option value="DPO">Detrended Price Osc</option>
                            <option value="DCW">Donchian Channel Width</option>
                            <option value="EMV">Ease of Movement</option>
                            <option value="FStoch">Fast Stochastic</option>
                            <option value="MACD">MACD</option>
                            <option value="MDX">Mass Index</option>
                            <option value="Momentum">Momentum</option>
                            <option value="MFI">Money Flow Index</option>
                            <option value="NVI">Neg Volume Index</option>
                            <option value="OBV">On Balance Volume</option>
                            <option value="Performance">Performance</option>
                            <option value="PPO">% Price Oscillator</option>
                            <option value="PVO">% Volume Oscillator</option>
                            <option value="PVI">Pos Volume Index</option>
                            <option value="PVT">Price Volume Trend</option>
                            <option value="ROC">Rate of Change</option>
                            <option value="RSI">RSI</option>
                            <option value="SStoch">Slow Stochastic</option>
                            <option value="StochRSI">StochRSI</option>
                            <option value="TRIX">TRIX</option>
                            <option value="UO">Ultimate Oscillator</option>
                            <option value="Vol">Volume</option>
                            <option value="WilliamR">William's %R</option>
                        </select><br />
                        <select id="Indicator4" name="Indicator4" class="input" style="width:140px;">
                            <option value="None" selected>None</option>
                            <option value="AccDist">Accumulation/Distribution</option>
                            <option value="AroonOsc">Aroon Oscillator</option>
                            <option value="Aroon">Aroon Up/Down</option>
                            <option value="ADX">Avg Directional Index</option>
                            <option value="ATR">Avg True Range</option>
                            <option value="BBW">Bollinger Band Width</option>
                            <option value="CMF">Chaikin Money Flow</option>
                            <option value="COscillator">Chaikin Oscillator</option>
                            <option value="CVolatility">Chaikin Volatility</option>
                            <option value="CLV">Close Location Value</option>
                            <option value="CCI">Commodity Channel Index</option>
                            <option value="DPO">Detrended Price Osc</option>
                            <option value="DCW">Donchian Channel Width</option>
                            <option value="EMV">Ease of Movement</option>
                            <option value="FStoch">Fast Stochastic</option>
                            <option value="MACD">MACD</option>
                            <option value="MDX">Mass Index</option>
                            <option value="Momentum">Momentum</option>
                            <option value="MFI">Money Flow Index</option>
                            <option value="NVI">Neg Volume Index</option>
                            <option value="OBV">On Balance Volume</option>
                            <option value="Performance">Performance</option>
                            <option value="PPO">% Price Oscillator</option>
                            <option value="PVO">% Volume Oscillator</option>
                            <option value="PVI">Pos Volume Index</option>
                            <option value="PVT">Price Volume Trend</option>
                            <option value="ROC">Rate of Change</option>
                            <option value="RSI">RSI</option>
                            <option value="SStoch">Slow Stochastic</option>
                            <option value="StochRSI">StochRSI</option>
                            <option value="TRIX">TRIX</option>
                            <option value="UO">Ultimate Oscillator</option>
                            <option value="Vol">Volume</option>
                            <option value="WilliamR">William's %R</option>
                        </select>
                    </div>
                    <div class="inputtitle" style="text-align:center;margin-top:10px;">
                        <input id="btUpdateChart" name="Button1" type="submit" class="input" value="Update Chart">
                    </div>
                </form>
            </td>
            <td id="chart-content" style="background-color:white;vertical-align: top;">
                <div id="tooltip"><span id="tooltip-content">&nbsp</span></div>
                <br />
                <img id="ChartImage" align="top" border="0" usemap="#map" />
                <map name="map" id="imageMap" ></map>
                <div class="overlap"></div>
            </td>
        </tr>
    </table>
</div>
<?php $this->renderPartial("report/chart/_fibonacciDialogBox"); ?>
<div id="alert">Done</div>
<h1>Tesing</h1>
<form action="<?php echo Yii::app()->createUrl("stock/chart"); ?>" method="post">
<?php
    $tickers = $model->getAllCompany();
    echo CHtml::dropDownList('ticker-for-test', array(), $tickers, array('style' => 'width:140px'));
    echo CHtml::submitButton("Run test");
?>
</form>
<table>
    <tr>
        <td>count</td>
        <td>date</td>
        <td>ceiling</td>
        <td>floor</td>
        <td>ref</td>
        <td>c - (c -f)/2</td>
        <td>af</td>
        <td>aaf</td>
        <td>new low</td>
        <td>new high</td>
        <td>new close</td>
        <td>new open</td>
    </tr>
<?php
if(isset($_REQUEST['ticker-for-test'])) {
    $ticker = $_REQUEST['ticker-for-test'];
  $af = $aaf = array();
  $query = "companyID = ". $ticker ." and ( timestamp between '2011-04-07 00:00:00' and  '2011-10-26 00:00:00') order by timestamp asc";
  $db = Stock::model()->findAll($query);


  $count = count($db) - 1;
  $aaf = adjustPrice($db);
  for ($i = $count; $i >= 0; --$i) {
  $temp = $db[$i]->ceiling - (($db[$i]->ceiling - $db[$i]->floor) / 2);

  /*if (($db[$i]->ref - $temp) < 0.1) {
  $af[$i] = 1;
  } else {
  if ($db[$i]->ref != 0)
  $af[$i] = $temp / $db[$i]->ref;
  else
  $af[$i] = 0;
  }
  if ($i == $count) {
  $aaf[$i] = $af[$i];
  } else {
  $aaf[$i] = $aaf[$i + 1] * $af[$i];
  }*/


  echo "<tr>
  <td>" . $i . "</td>
  <td>" . $db[$i]->timestamp . "</td>
  <td>" . $db[$i]->ceiling . "</td>
  <td>" . $db[$i]->floor . "</td>
  <td>" . $db[$i]->ref . "</td>
  <td>" . $temp . "</td>
  <td>" /*. $af[$i]*/ . "</td>
  <td>" . $aaf[$i] . "</td>
  <td>" . $aaf[$i] * $db[$i]->low . "</td>
  <td>" . $aaf[$i] * $db[$i]->high . "</td>
  <td>" . $aaf[$i] * $db[$i]->close . "</td>
  <td>" . $aaf[$i] * $db[$i]->open . "</td>
  </tr>";
  } 
}
/*    $test = Stock::model()->findAll(array("order" => "timestamp asc", "limit" => "1", "condition" => "companyID = 304"));
  echo $test[0]->timestamp; => If no data we'll get an error here
  $now = Date("Y-m-d h:i:s");
  (int)((strtotime($now) - strtotime($test[0]->timestamp))/86400 + 1); */
?>
</table>
<script type="text/javascript">
    var params;
    //These lines're used for get the Chart image by calling ajax request
    $('#btUpdateChart').click(function() {
        params = $("#Form1").serialize();
        $("#alert").text("Loading...");
        $.ajax({
            type: 'GET',
            data: params,
            url: '<?php echo Yii::app()->createUrl('stock/getChart'); ?>',
            success: function(result) {
                var data = $.parseJSON(result);
                imageCode = 'data:image/png;base64,' + data.imageCode;
                $('#ChartImage').attr('src', imageCode);
                $('#imageMap').html(data.imageMap);
                //$('div.tooltip').remove();
                //$('area').tooltip();
                $("#alert").text("Done");
            }
        });
        return false;
    });
    var clicking = false;
    var x1;
    var y1;
    var x2;
    var y2;
    var d = new Date();
    function draw(x, closePrice) {
        if(!clicking) {
            x1 = x;
            y1 = closePrice;
            $("#alert").text("Please select the second point");
        } else {
            x2 = x;
            y2 = closePrice;
            $("#alert").text("Drawing...");
            $("#fibonacciDialogBox").dialog("open");
        }
        clicking = !clicking;
    }
    $("area").live("click", function() {
        return false;
    });
    function closeBox() {
        $("#fibonacciDialogBox").dialog("close");
        return false;
    }
    function reloadWithLines() {
        var list = "";
        count = 0;
        $("#fibonacciDialogBox input[type=checkbox]:checked").each(function() {
            list = list + "&fibo" + count + "=" + $(this).parent().next("td").children().eq(0).val();
            ++count;
        });
        $.ajax({
            type: 'GET',
            data: params + "&x=1"+ "&lineX1=" + x1 + "&lineY1=" + y1 + "&lineX2=" + x2 + "&lineY2=" + y2 + list,
            url: '<?php echo Yii::app()->createUrl('stock/getChart'); ?>',
            success: function(result) {
                var data = $.parseJSON(result);
                imageCode = 'data:image/png;base64,' + data.imageCode;
                $('#ChartImage').attr('src', imageCode);
                $('#imageMap').html(data.imageMap);
                $('div.tooltip').remove();
                $('area').tooltip();
                $("#alert").text("Done");
            }
        });
        $('#fibonacciDialogBox').dialog('close');
    }
    $('area').live('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            tooltip = $(this).attr("title");
            $("#tooltip-content").html(tooltip);
            $("#tooltip-content").css("border", "1px solid #666");
        } else {
            $("#tooltip-content").html("&nbsp");
            $("#tooltip-content").css("border", "1px solid transparent");
        }
    });
</script>